<template>
  <div class="home-container">
    <el-card class="home-card" shadow="hover">
      <div class="content">
        <h1 class="main-title">校园活动系统</h1>
        <p class="sub-title">一个便捷、智能的大学生活动平台，助你发现精彩，结识伙伴。</p>
      </div>
    </el-card>
  </div>
</template>

<script setup>
</script>

<style scoped>
.home-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 70vh;
  background: linear-gradient(to right, #e0f7fa, #f1f8e9);
  padding: 20px;
}

.home-card {
  width: 100%;
  max-width: 700px;
  padding: 60px 40px;
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(0, 100, 100, 0.5);
  background-color: #ffffff;
}

.content {
  text-align: center;
}

.main-title {
  font-size: 48px;
  font-weight: 800;
  color: #2c3e50;
  margin-bottom: 20px;
}

.sub-title {
  font-size: 20px;
  color: #555;
  line-height: 1.6;
  max-width: 600px;
  margin: 0 auto;
}
</style>
